<template>
  <div class="swiperBox">
    <el-carousel :interval="4000" type="card" height="20vw">
        <el-carousel-item v-for="(img, index) in imgList" :key="index">
          <el-image :src="img.url"></el-image>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        imgList: [
                {
                  url: "http://120.77.71.211:9011/1.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/2.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/3.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/4.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/5.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/6.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/7.jpg",
                },
                {
                  url: "http://120.77.71.211:9011/8.jpg",
                },
              ],
      }
    }
  }
</script>

<style>
  .swiperBox{
    padding: 80px 90px 10px 90px;
  }
  .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: white;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: white;
    }
</style>
